import React, { FC, ReactElement } from 'react';
import type { DatePickerProps } from 'antd/es/date-picker';
import { DatePicker, Col, Form } from 'antd';
import { getRulesConfig, commonInterface } from '@C/base/SFields/constant';
import { DisabledDateFn, DisabledOption, LocaleDatePicker } from '@C/base/SFields/SDatePicker/constant';
import './index.less';

interface IProps extends commonInterface{
  // 是否填充剩余部分
  isForcedFill: boolean;
  // 禁用的日期
  disabledDate: DisabledOption;
}

const Index: FC<
  Partial<IProps> &
  Omit<DatePickerProps, 'disabledDate'>
> = (props): ReactElement => {
  const {
    name, label = '日期', span = 8, required = false, ruleIcon, formItemConfig,
    locale, isForcedFill = true, disabledDate, style, className,
    ...datePickerProps
  } = props;

  return (
    <Col span={span}>
      <div className="base-component-super-fields-common">
        <Form.Item
          label={label}
          name={name}
          rules={getRulesConfig(required, label, ruleIcon)}
          {...formItemConfig}
        >
          <DatePicker
            picker="quarter"
            className={`base-component-super-fields-quarter-picker ${className}`}
            locale={locale || LocaleDatePicker}
            style={{ width: isForcedFill ? '100%' : '', ...style }}
            placeholder="选择季度"
            disabledDate={DisabledDateFn(disabledDate, 'quarter')}
            {...datePickerProps}
          />
        </Form.Item>
      </div>
    </Col>
  );
};

export default Index;
